@extends('layouts.admin')
@section('pageTitle', '位置列表')
@section('content')
    <div class="main-panel">
        <div class="content apartment-index">
            <div class="container-fluid" style="min-height:600px;">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="header">
                                <legend>位置列表</legend>
                            </div>
                            <div class="toolbar">
                                <button onclick="add_activity_point()" class="btn btn-success" id="create_point">
                                    <i class="fa fa-plus"></i> 新建位置
                                </button>
                            </div>

                            <table id="bootstrap-table-container" class="table" data-url="/web/activityPoint/list?action={{$action}}" data-delete-url="/web/activityPoint/delete">
                                <thead>
                                <th data-field="state" data-checkbox="true"></th>
                                <th data-field="point_name" >活动埋点位置名称</th>
                                <th data-field="point_key" >活动埋点位置Key</th>
                                <th data-field="desc" >活动埋点位置描述</th>
                                <th data-field="created_at" >创建时间</th>
                                <th data-field="actions" class="td-actions text-center" data-events="operateEvents" data-formatter="operateFormatter">操作</th>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div><!--  end card  -->
                    </div> <!-- end col-md-12 -->
                </div> <!-- end row -->
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>

        function add_activity_point() {
            var html = '<div class="row" xmlns="http://www.w3.org/1999/html"><div class="col-md-12">' +

                '<form id="form_1" action="/web/activityPoint/add" method="post">'+
                    '<div class="row">'+
                         '<div class="col-sm-12">'+
                              '<div class="form-group">'+
                                  '<label class="col-sm-2 col-sm-offset-1 control-label" style="text-align: right">活动名称:</label>'+
                                  '<div class="col-sm-7 col-sm-offset-1" style="margin-left: 0px">'+
                                      '<input type="text" name="point_name" class="form-control" placeholder="请输入活动名称">'+
                                  '</div>'+
                              '</div>'+
                              '<div class="form-group">'+
                                   '<label class="col-sm-2 col-sm-offset-1 control-label" style="text-align: right;padding-top: 5px">描&emsp;&emsp;述:</label>'+
                                    '<div class="col-sm-7 col-sm-offset-1" style="margin-left: 0px;padding-top: 5px">'+
                                        '<input name="desc" type="text" class="form-control" placeholder="描述">'+
                                   '</div>'+
                              '</div>'+
                         '</div>'+
                    '</div>'+


                '</div></div><div class="col-md-7 text-right"></div></div><div class="table-responsive">' +
                 '</form>'
            ;
            var add_activity_point = utils.modal('新建位置',html,false,function (res){
                if(res == 1){
                    var data = $("#form_1").serialize();
                    var action = $("#form_1").attr('action');
                    var dataArr = data.split("&");
                    for(i=0;i<dataArr.length;i++ ){
                        var params = dataArr[i].split("=");
                        if(params[0] == 'point_name' && params[1] == ''){
                            utils.showNotification('请输入活动位名称',3);
                            return false;
                        }
                        if(params[0] == 'desc' && params[1] == ''){
                            utils.showNotification('请输入活动位描述',3);
                            return false;
                        }
                    }
                    $.post(action,data,function () {
                        add_activity_point.modal('hide');
                        $('#bootstrap-table-container').bootstrapTable('refresh');
                        if("{{$action}}" == "new_point"){
                            setTimeout(window.location.href='/web/activityDelivery/show',6000);
                        }
                    });
                }
            })
        }

        function edit_activity_point(o) {
            var html = '<div class="row" xmlns="http://www.w3.org/1999/html"><div class="col-md-12">' +

                '<form id="form_2" action="/web/activityPoint/edit" method="post">'+
                    '<div class="row">'+
                        '<div class="col-sm-12">'+
                            '<input type="text" name="id" style="display: none;" class="form-control" value="'+$(o).data('id')+'">'+
                            '<input type="text" name="point_key" style="display: none;" class="form-control" value="'+$(o).data('point_key')+'">'+
                            '<div class="form-group">'+
                                '<label class="col-sm-2 col-sm-offset-1 control-label" style="text-align: right">活动名称:</label>'+
                                '<div class="col-sm-7 col-sm-offset-1" style="margin-left: 0px">'+
                                    '<input type="text" name="point_name" class="form-control" value="'+$(o).data('point_name')+'" >'+
                                '</div>'+
                            '</div>'+
                            '<div class="form-group">'+
                                '<label class="col-sm-2 col-sm-offset-1 control-label" style="text-align: right;padding-top: 5px">描&emsp;&emsp;述:</label>'+
                                '<div class="col-sm-7 col-sm-offset-1" style="margin-left: 0px;padding-top: 5px">'+
                                    '<input name="desc" type="text" class="form-control" value="'+$(o).data('desc')+'">'+
                                '</div>'+
                            '</div>'+
                        '</div>'+
                    '</div>'+

                '</div></div><div class="col-md-7 text-right"></div></div><div class="table-responsive">' +
                '</form>'
               ;
            var edit_activity_point = utils.modal('编辑位置',html,false,function (res){
                if(res == 1){
                    var data = $("#form_2").serialize();
                    var action = $("#form_2").attr('action');
                    var dataArr = data.split("&");
                    for(i=0;i<dataArr.length;i++ ){
                        var params = dataArr[i].split("=");
                        if(params[0] == 'point_name' && params[1] == ''){
                            utils.showNotification('请输入活动位名称',3);
                            return false;
                        }
                        if(params[0] == 'desc' && params[1] == ''){
                            utils.showNotification('请输入活动位描述',3);
                            return false;
                        }
                    }
                    $.post(action,data,function () {
                        edit_activity_point.modal('hide');
                        $('#bootstrap-table-container').bootstrapTable('refresh');
                    });
                }
            })
        }
        function operateFormatter(value,row,index) {
            var actions = [];
            actions.push( [
                '<a data-id="'+row.id+'" data-point_name="'+row.point_name+'" data-desc="'+row.desc+'" data-point_key="'+row.point_key+'" onclick="edit_activity_point(this)">编辑</a>'+
                '</a> | ',
                '<a href="#" class="delete">删除</a>'
            ].join(''));
            return actions.join('');
        }
        window.operateEvents = {
            'click .delete':function (e,value,row) {
                var bt = document.body.querySelector('#bootstrap-table-container');
                var event = new CustomEvent("table-delete-item", { "detail": [row.id] });
                bt.dispatchEvent(event);
            }
        }
        <!--判断是否有新建投放页面跳转进来的，如果是则添加跳转回去的按钮-->
        $(document).ready(function () {
            var parentUrl=parent.location.href;
            if(parentUrl.indexOf('/web/activityDelivery/index')!=-1){
                var htmlbutton= '<div class="footer pull-center" style="padding: 15px 10px;">'+
                    '<a class="btn btn-info btn-fill btn-wd btn-finish " href="/web/activityDelivery/show" role="button">完成</a>'+
                    '<div class="clearfix"></div>'+
                    '</div>';
                $('.bootstrap-table').after(htmlbutton);
            }
        });
    </script>
@endsection